<template>
  <el-dialog title="编辑账户"
             :visible.sync="dialogForm"
             width="1200px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="货物种类"
                        prop="typeCode">
            <el-select v-model="form.cargoTypeCode"
                       placeholder="请选择"
                       @change="selectChange">
              <el-option v-for="item in selectThingsType"
                         :key="item.cargoTypeCode"
                         :label="item.cargoTypeName"
                         :value="item.cargoTypeCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品名"
                        prop="code">
            <el-select v-model="form.cargoCode"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="item in selectGroductName"
                         :key="item.cargoCode"
                         :label="item.cargoName"
                         :value="item.cargoCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格1"
                        prop="normOne">
            <auto-search-dic @selectName="v=>form.normOne=v"
                             :name="form.normOne"
                             code="CARGO_GGY"></auto-search-dic>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="规格2"
                        prop="normTwo">
            <auto-search-dic @selectName="v=>form.normTwo=v"
                             :name="form.normTwo"
                             code="CARGO_GGE"></auto-search-dic>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格3"
                        prop="normThree">
            <auto-search-dic @selectName="v=>form.normThree=v"
                             :name="form.normThree"
                             code="CARGO_GGS"></auto-search-dic>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材质"
                        prop="material">
            <auto-search-dic @selectName="v=>form.material=v"
                             :name="form.material"
                             code="CARGO_CZ"></auto-search-dic>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="管理方式"
                        prop="manageWay">
            <el-select v-model="form.manageWay"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictManagement"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计量方式"
                        prop="measureWay">
            <el-select v-model="form.measureWay"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictMeterStyle"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家"
                        prop="madeBy">
            <auto-search-dic @selectName="v=>form.madeBy=v"
                             :name="form.madeBy"
                             code="CARGO_SCZ"></auto-search-dic>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否有效"
                        prop="valid">
            <el-select v-model="form.valid"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictTrueOrFalse"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参考重量(吨/件)"
                        prop="referenceWeight">
            <el-input v-model.number="form.referenceWeight"
                      type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getCargoTypeList } from "@/api/baseResource/baseResource" //货物种类的下拉菜单
import { getCargoNameList } from '@/api/baseResource/baseResource' //品名的下拉菜单
import { addThings, updateThings } from '@/api/things/things'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'thingAttributeForm',
  components: { autoSearchDic },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        // lineNo: [
        //   { required: true, message: '请输入专运线', trigger: 'blur' },
        //   sortLength
        // ],
        // orgId: [{ required: true, message: '请选择单位', trigger: 'change' }],
        // deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
        // remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      maxLot: 0,
      selectThingsType:[],
      selectGoodsType: [],
      selectGroductName: []
    }
  },
  mounted() {
    getCargoTypeList().then(res => {
      this.selectThingsType = res.data.aaData
    })
    getCargoNameList().then(res => {
      this.selectGoodsType = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        cargoName: '',
        cargoCode: '',
        ifNotStandard: false,
        normOne: '',
        normTwo: '',
        normThree: '',
        material: '',
        madeBy: '',
        manageWay: '',
        measureWay: '',
        valid: false,
        referenceWeight: null,
        cargoTypeCode: '',
        cargoTypeName: '',
        orgId: null,
        orgName: '',
        remark: null
      }
    },
    selectChange(val) {
      // 获取货物name
      if (this.form.cargoTypeCode === val) {
        this.form.cargoTypeName = val
      }
      // 品名
      this.selectGroductName = []
      for (let i = 0; i < this.selectGoodsType.length; i++) {
        if (this.selectGoodsType[i].cargoTypeCode == this.form.cargoTypeCode) {
          this.selectGroductName.push({cargoCode:this.selectGoodsType[i].cargoCode,cargoName:this.selectGoodsType[i].cargoName})
        }
      }
    },
    //获取id
    getId(val) {
      this.form.id = val
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateThings(this.form.id, this.form).then(res => {
            this.$message({ message: '编辑成功!', type: 'success' })
            this.dialogForm = false
            this.$emit('load',this.form.cargoCode)
          })
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },

    // 获取货物的name
    getName(index) {
      this.selectGroductName.forEach(element => {
        if (this.form.cargos[index].cargoCode === element.cargoCode) {
          this.form.cargos[index].cargoName = element.cargoName
        }
      })
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>


<style scoped>
</style>
